<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<!--头部-->
    <header>
        <div class="container">
            <div class="logo">
                <a href=""><img src="img/brand-white.png" alt=""></a>
            </div>
            <nav>
                <ul>
                    <li><a href="" class="active">Home</a></li>
                    <li><a href="">Profile</a></li>
                    <li><a href="">Messages</a></li>
                    <li><a href="">Docs</a></li>
                </ul>
            </nav>
        </div>
    </header>
<!--中间部分-->
    <section>
        <div class="container">
            <!--左-->
            <div class="dave">
                <div class="col-1">
                    <div class="bg">
                        <img src="img/iceland.jpg" alt="" class="img-1">
                        <div class="tou">
                            <img src="img/avatar-dhg.png" alt="">
                        </div>
                        <div class="text">
                            <h4>Dave Gamache</h4>
                            <p>I wish i was a little bit taller,wish i
                                was  a baller</p>
                        </div>
                    </div>
                    <div class="col-2">
                        <h4>About</h4>
                        <p>Went to <span>oh,Canda</span></p>
                        <p>Became friends with <span>Obama</span></p>
                        <p>Worked at Github</p>
                        <p>Lives in <span>San Francisco,CA</span></p>
                        <p>From <span>Seattle,WA</span></p>
                    </div>
                    <div class="col-3">
                        <h4>Photos</h4>
                        <img src="img/instagram_5.jpg" alt="">
                        <img src="img/instagram_6.jpg" alt="">
                        <img src="img/instagram_7.jpg" alt="">
                        <img src="img/instagram_8.jpg" alt="">
                        <img src="img/instagram_9.jpg" alt="">
                        <img src="img/instagram_10.jpg" alt="">
                    </div>
                </div>

            </div>
            <!--中-->
            <div class="gamache">
                <div class="list-1">
                    <div class="top">
                        <time>4min</time>
                        <h4>Dave Gamache</h4>
                    </div>
                    <div class="top-1">
                        <p>
                            Aenean lacinia bibendum nulla sed consectetur.Vestibulum id ligula porta felis
                            emismod semper.Morbl leo risus,porta ac consectetur ac,vestibulum at eros,Cras
                            justo odio,dapibus ac fasilisis in,eggestas eget quam.Vestibulum id ligula porta felic
                            euismod semper.Cum sociis natoque penatibus et magnis dis parturient montes,
                            nascetur ridiculus mus.

                        </p>
                    </div>
                    <div class="top-2">
                        <div class="img1">
                            <img src="img/unsplash_1.jpg" alt="">
                            <img src="img/instagram_1.jpg" alt="">
                        </div>
                        <div class="img2">
                            <img src="img/instagram_13.jpg" alt="">
                            <img src="img/unsplash_2.jpg" alt="">
                        </div>
                    </div>
                    <div class="top-3">
                        <p>
                            <span>Jacon Thornton:</span>Donec id elit non mi porta gravida at eget metus.Vivamus sagittis
                            lacus vel augue laoreet rutrum faucibus dolor auctor.Donec ullamcorper nulla non
                            metus auctor fringilla.Praesent commodo cursus magna,vel scelerisque nisl
                            consectetur et.Sed posuere consectetur est at lobortis.
                        </p>
                        <p>
                           <span>Mark Otto:</span>Lorem ipsum dolor sit amet.consectetur adipiscing elit.Fusce dapibus,
                            tellus ac sursus commodo,tortor mauris condimentum,ut fermentum massa
                            justo sit amet risus.
                        </p>
                    </div>
                    <div class="top-4">
                        <div class="jacon">
                            <time>4min</time>
                            <h4>Dave Gamache</h4>
                        </div>
                        <p>
                           Donec id elit non mi porta gravida at eget metus.Integer posuere erat a ante
                            venenatis dapibus posuere velit aliquet.Cum socils natoque penatibus et magnis
                            dis parturient montes,nascetur ridiculus mus.Morbi leo risus,porta ac consectetur
                            ac,vestibulum at eros.Lorem ipsum dolor sit amet,consectetur adipiscing elit.
                        </p>
                    </div>
                    <div class="top-5">
                        <div class="mark">
                            <time>34min</time>
                            <h4>Mark Otto</h4>

                        </div>
                        <p>
                            Donec ullamcorper nulla non metus auctor fringilla.Vestibulum id ligula porta felis
                            euismod semper.Aenean eu leo quam.Pellentesque ornare sem lacinia quam
                            venenatis cestibulum.Etiam porta sem malesuada magna mollis euismod.Donec
                            sed odio dui.
                        </p>
                        <img src="img/instagram_3.jpg" alt="">
                        <p>
                            <span>Dace Gamache:</span>Donec id elit non mi porta gravida at eget metus.Vivamus sagittis
                            lacus vel augue laoreet rutrum faucibus dolor auctor.Donec ullamcorper nulla non
                            metus auctor fringilla.Praesent commodo sursus magna,vel scelersque nisl
                            consectetur et. Sed posuere consectetur est at lobortis.
                        </p>
                    </div>
                </div>
            </div>
            <!--右-->
            <div class="sponsored">
                <div class="like-1">
                        <div class="like-2">
                            <h4>Sponsored</h4>
                            <img src="img/instagram_2.jpg" alt="">
                            <p>It might be time to visit lceland.</p>
                            <p>
                                lceland is so chill,and everything
                                looks cool here.Also,we heard the
                                people are pretty nice.What are you
                                waiting for?
                            </p>
                            <button>Buy a ticket</button>
                        </div>
                        <div class="like-3">
                           <div class="like-4">
                               <h4>Likes</h4>
                               <div class="fat-1">
                                   <div class="fat">
                                       <img src="img/avatar-fat.jpg" alt="">
                                       <h4>Jacob Thornton</h4><span>@fat</span>
                                   </div>
                                   <button class="btn"><img src="img/lianxi.png" alt="">Follow</button>
                               </div>
                               <div class="fat-1">
                                   <div class="fat">
                                       <img src="img/avatar-mdo.png" alt="">
                                       <h4>Mark Otto</h4><span>@mdo</span>
                                   </div>
                                   <button class="btn"><img src="img/lianxi.png" alt="">Follow</button>
                               </div>
                           </div>

                            <div class="though">
                                <p>
                                    Dave really likes these nerds,no one
                                    konws why though.
                                </p>
                            </div>
                        </div>
                </div>

            </div>
        </div>
    </section>
<!--底部-->
    <footer>
        <div>
            <p>Designed and built with all the love in the world by <span>@mdo</span>,<span>@fat</span>,and <span>@dhg</span>.</p>
            <p>
                <a href="">About</a>
                <a href="">Terms</a>
                <a href="">Privacy</a>
                <a href="">Licenses</a>
                <a href="">FAQ</a>
            </p>
        </div>
    </footer>

</body>
</html>